<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" template="/layout/normal.xhtml"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:s="http://jboss.com/products/seam/taglib">

	<ui:define name="body">
		<a name="errores" />
		<h:panelGrid columns="1" id="mensaje">
			<h:messages id="mesage1" styleClass="mensaje_bienvenida">
				<a4j:support event="onchange" action="location.hash='#errores'"></a4j:support>
			</h:messages>
		</h:panelGrid>
		<h:panelGrid columns="1" styleClass="contenedor_pest">
			<rich:tabPanel styleClass="pestanya">
				<rich:tab label="Nuevo colegiado" styleClass="no_border">
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="DATOS PERSONALES" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="3">
						<h:panelGrid columns="1">
							<h:panelGrid columns="5">
								<h:outputText value="Nombre" styleClass="th80" />
								<h:inputText value="#{colegiadoAction.newColegiado.nombre}"
									styleClass="input100" />
								<rich:spacer width="15px;"></rich:spacer>
								<h:outputText value="Apellidos" styleClass="th80" />
								<h:inputText value="#{colegiadoAction.newColegiado.apellidos}"
									styleClass="input200" />
							</h:panelGrid>
							<h:panelGrid columns="8">
								<h:outputText value="Dni" styleClass="th80" />
								<h:inputText value="#{colegiadoAction.newColegiado.dni}"
									styleClass="input60" maxlength="9" />
								<rich:spacer width="15px;"></rich:spacer>
								<h:outputText value="Fecha nacimiento" styleClass="th80" />
								<rich:calendar value="#{colegiadoAction.newColegiado.fechaNac}"
									styleClass="input75" datePattern="dd/MM/yyyy">
									<a4j:support event="onchanged"
										action="#{colegiadoAction.calculaEdad()}" reRender="edad"></a4j:support>
								</rich:calendar>
								<rich:spacer width="15px;"></rich:spacer>
								<h:outputText value="Edad" styleClass="th50" />
								<h:outputText value="#{colegiadoAction.edad}" id="edad"
									styleClass="th50" />
							</h:panelGrid>
							<h:panelGrid columns="5">
								<h:outputText value="Provincia" styleClass="th80_registro" />
								<h:selectOneMenu
									value="#{colegiadoAction.newColegiado.provincia}"
									styleClass="input100" id="provNac">
									<s:selectItems var="tipo"
										value="#{colegiadoAction.listaProvincias}"
										label="#{tipo.provincia}" noSelectionLabel=""></s:selectItems>
									<s:convertEntity />
									<a4j:support event="onchange" reRender="munNac"></a4j:support>
								</h:selectOneMenu>
								<rich:spacer width="15px;"></rich:spacer>
								<h:outputText value="Municipio" styleClass="th70" />
								<h:selectOneMenu
									value="#{colegiadoAction.newColegiado.municipio}"
									styleClass="input140" id="munNac">
									<s:selectItems var="tipo"
										value="#{colegiadoAction.listaMunicipios}"
										label="#{tipo.municipio}" noSelectionLabel=""></s:selectItems>
									<s:convertEntity />
								</h:selectOneMenu>
							</h:panelGrid>
							<h:panelGrid columns="2">
								<h:outputText value="Colegio" styleClass="th80" />
								<h:selectOneMenu value="#{colegiadoAction.newColegiado.colegio}"
									id="colegio" styleClass="input125">
									<s:selectItems var="tipo"
										value="#{colegiadoAction.listaColegios}"
										label="#{tipo.nombre}" noSelectionLabel=""></s:selectItems>
									<s:convertEntity />
								</h:selectOneMenu>
							</h:panelGrid>
						</h:panelGrid>
						<rich:spacer width="10px;" />
						<h:panelGrid columns="1" width="200px;">
							<h:outputText
								value="Los campos nombre, dni y fecha de nacimiento son obligatorios para dar de alta al nuevo colegiado."
								styleClass="thDescripcion_peq200" />
						</h:panelGrid>
					</h:panelGrid>
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="FOTOGRAFÍA" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="5">
						<h:panelGrid columns="1" cellspacing="5px;" id="photoPanel">
							<rich:fileUpload id="upload" listHeight="150px;"
								listWidth="300px;" allowFlash="true"
								fileUploadListener="#{colegiadoAction.obtenerFotografia}"
								maxFilesQuantity="1" acceptedTypes="jpg,jpeg,gif,png,bmp"
								immediateUpload="false" addControlLabel="Seleccionar"
								clearAllControlLabel="Limpiar todo" clearControlLabel="Limpiar"
								stopEntryControlLabel="Stop" uploadControlLabel="Subir foto"
								doneLabel="Finalizado" progressLabel="subiendo..."
								transferErrorLabel="Error al subir"
								sizeErrorLabel="Tamaño max. excedido">
								<a4j:support event="onuploadcomplete"
									reRender="photo, photoPanel, mensaje, nophoto"></a4j:support>
							</rich:fileUpload>
							<h:outputText value="Pulse añadir (add) para cargar una foto"
								styleClass="th200_info"
								rendered="#{colegiadoAction.newColegiado.foto == null}" />
						</h:panelGrid>
						<h:panelGrid columns="2" id="nophoto">
							<rich:spacer width="15px;"
								rendered="#{colegiadoAction.newColegiado.foto == null}"></rich:spacer>
							<h:graphicImage
								rendered="#{colegiadoAction.newColegiado.foto == null}"
								url="/temas/tiki/imagenes/otros/noFotoUsuario.png"
								width="120px;" height="140px;" />
						</h:panelGrid>
						<h:panelGrid columns="2" id="photo">
							<rich:spacer width="15px;"
								rendered="#{colegiadoAction.newColegiado.foto!=null}" />
							<h:panelGrid columns="1">
								<s:graphicImage value="#{colegiadoAction.newColegiado.foto}"
									width="120px" height="140px"
									rendered="#{colegiadoAction.newColegiado.foto != null}"></s:graphicImage>
								<a4j:commandButton action="#{colegiadoAction.deletePhoto}"
									value="" styleClass="boton_modal eliminar" style="width:120px;"
									rendered="#{colegiadoAction.newColegiado.foto !=null}"
									reRender="photoPanel, photo, mensaje, nophoto"
									title="pulsa para eliminar la foto y poder cargar una nueva" />
							</h:panelGrid>
						</h:panelGrid>
						<rich:spacer width="15px;"></rich:spacer>
						<h:panelGrid columns="1" width="200px;">
							<h:outputText
								value="Sube aquí la fotografía identificativa del colegiado a dar de alta. Recuerda que sólo podrá subir una fotografía,
								 aunque siempre podrá cambiar cuando lo desee."
								styleClass="thDescripcion_peq200" />
						</h:panelGrid>
					</h:panelGrid>
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="DIRECCIÓN Y CONTACTO"
							styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="3" cellspacing="5px;">
						<h:panelGrid columns="1">
							<h:panelGrid columns="2">
								<h:outputText value="Dirección" styleClass="th80" />
								<h:inputText
									value="#{colegiadoAction.newColegiado.direccion.direccion}"
									styleClass="input250" />
							</h:panelGrid>
							<h:panelGrid columns="5">
								<h:outputText value="Provincia" styleClass="th80" />
								<h:selectOneMenu
									value="#{colegiadoAction.newColegiado.direccion.provincia}"
									styleClass="input100" id="provDir">
									<s:selectItems var="tipo"
										value="#{colegiadoAction.listaProvinciasDir}"
										label="#{tipo.provincia}" noSelectionLabel=""></s:selectItems>
									<s:convertEntity />
									<a4j:support event="onchange" reRender="munDir"></a4j:support>
								</h:selectOneMenu>
								<rich:spacer width="15px;"></rich:spacer>
								<h:outputText value="Municipio" styleClass="th80" />
								<h:selectOneMenu
									value="#{colegiadoAction.newColegiado.direccion.municipio}"
									styleClass="input140" id="munDir">
									<s:selectItems var="tipo"
										value="#{colegiadoAction.listaMunicipiosDir}"
										label="#{tipo.municipio}" noSelectionLabel=""></s:selectItems>
									<s:convertEntity />
								</h:selectOneMenu>
							</h:panelGrid>
							<h:panelGrid columns="5">
								<h:outputText value="Email" styleClass="th80" />
								<h:inputText value="#{colegiadoAction.newColegiado.email}"
									styleClass="input175" />
								<rich:spacer width="15px;"></rich:spacer>
								<h:outputText value="Teléfono contacto" styleClass="th100" />
								<h:inputText value="#{colegiadoAction.newColegiado.telefono}"
									styleClass="input60" maxlength="9" />
							</h:panelGrid>
						</h:panelGrid>
						<rich:spacer width="15px;" />
						<h:panelGrid columns="1" width="200px;">
							<h:outputText
								value="Puede rellenar los datos de contacto del colegiado para tenerlo informado acerca de todo
							lo que acontence en la competición."
								styleClass="thDescripcion_peq200" />
						</h:panelGrid>
					</h:panelGrid>
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="OBSERVACIONES" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="3" cellspacing="5px;">
						<h:panelGrid columns="2">
							<h:outputText value="Observ." styleClass="th80" />
							<h:inputTextarea
								value="#{colegiadoAction.newColegiado.observaciones}"
								styleClass="inputarea" />
						</h:panelGrid>
						<rich:spacer width="15px;" />
						<h:panelGrid columns="1" width="200px;">
							<h:outputText
								value="Ponga aquí por ejemplo datos relacionados con enfermedades que haya tenido, alergias a medicamentos o 
									alguna lesión de importancia sufrida por el colegiado. Podrá ser de gran ayuda."
								styleClass="thDescripcion_peq200" />
						</h:panelGrid>
					</h:panelGrid>
				</rich:tab>
			</rich:tabPanel>
			<rich:spacer height="10px;"></rich:spacer>

		</h:panelGrid>

	</ui:define>
	<ui:define name="botonera">
		<h:panelGrid columns="7" styleClass="tabla_botonera">
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera ayuda" id="linkAyuda"
					style="width:48px;"
					title="pulsa para obtener ayuda acerca de la pantalla">
					<rich:componentControl for="panelAyuda" attachTo="linkAyuda"
						operation="show" event="onclick"></rich:componentControl>
				</a4j:commandButton>
				<h:outputText value="Ayuda" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera guardar"
					id="linkGuardar" style="width:48px;"
					title="pulsa para guardar los datos del nuevo colegiado">
					<rich:componentControl for="panelGuardar" attachTo="linkGuardar"
						operation="show" event="onclick"></rich:componentControl>
				</a4j:commandButton>
				<h:outputText value="Guardar" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera volver"
					style="width:48px;" action="gotoMenuColegiados"
					title="pulsa para volver al menú colegiados de la aplicación">
				</a4j:commandButton>
				<h:outputText value="Volver" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera inicio"
					style="width:48px;" action="gotoMenu"
					title="pulsa para volver al menú principal de la aplicación">
				</a4j:commandButton>
				<h:outputText value="Inicio" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
		</h:panelGrid>

		<rich:modalPanel id="panelAyuda" minWidth="400" minHeight="200"
			autosized="false" resizeable="false">

			<rich:spacer height="5px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="160px;"></rich:spacer>
				<h:outputText value="Ayuda" styleClass="thTitulo" />
			</h:panelGrid>
			<rich:spacer height="10px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="25px;"></rich:spacer>
				<h:outputText
					value="Está en la pantalla de alta de nuevo colegiado. Para dar de alta un nuevo colegiado es obligatorio un nombre, su dni y su fecha de nacimiento.
					  Además el colegiado deberá ser mayor de 16 años para poder ser inscrito en la competición. 
									Para almacenar los datos pulse el botón guardar de la botonera inferior."
					style="width:325px;" styleClass="thModalPanel" />
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="325px;"></rich:spacer>
				<h:panelGrid columns="1">
					<h:commandButton id="Aceptar" styleClass="boton_crr cerrar">
						<rich:componentControl for="panelAyuda" attachTo="Aceptar"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
		</rich:modalPanel>

		<rich:modalPanel id="panelGuardar" minWidth="400" minHeight="200"
			autosized="false" resizeable="false">

			<rich:spacer height="5px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="160px;"></rich:spacer>
				<h:outputText value="Guardar" styleClass="thTitulo" />
			</h:panelGrid>
			<rich:spacer height="10px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="25px;"></rich:spacer>
				<h:outputText
					value="Se dispone a guardar los datos en el sistema. 
					¿Desea guardar los datos modificados del formulario?"
					style="width:325px;" styleClass="thModalPanel" />
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="90px;"></rich:spacer>
				<h:panelGrid columns="3">
					<h:commandButton id="aceptarG"
						action="#{colegiadoAction.guardar()}" value=""
						styleClass="boton_modal aceptar">
						<rich:componentControl for="panelGuardar" attachTo="aceptarG"
							operation="hide" event="onclick" />
					</h:commandButton>
					<rich:spacer width="15px;"></rich:spacer>
					<h:commandButton id="cancelarG" value=""
						styleClass="boton_modal cancelar">
						<rich:componentControl for="panelGuardar" attachTo="cancelarG"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="325px;"></rich:spacer>
				<h:panelGrid columns="1">
					<h:commandButton id="cerrarG" styleClass="boton_crr cerrar">
						<rich:componentControl for="panelGuardar" attachTo="cerrarG"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
		</rich:modalPanel>

	</ui:define>
</ui:composition>